<!--  -->
<template>
  <div id="showpop">
    <div class="nav bg-theme color-f text-l" >
        <div style="display:flex;flex:2;">
            <i class="iconfont icon-fanhui font19 pl08 iback" @click="$router.back(-1)"></i>
            <!-- 详情进入 -->
            <span class="font19 ml16">
                {{ pagename }}
            </span>
        </div>
        
            <span  style="margin-right:10px;margin-left:10px">
                <van-icon @click="searchDialog()" name="search" size="25"/>
            </span>
    </div> 


    <div class="pageview">
        <component :is="tabviewName" ref="searchdata" :projectEstablishNumber="projectEstablishNumber" :solutionPlanInfoList="solutionPlanInfoList" style="height:calc(100vh-50px)"></component>
        <van-popup v-model="showtodoDialog" position="top" style="padding:20px 0 20px 0"
         get-container="#showpop">
            <!-- 商机查询 -->
            <van-field v-if="seleteType=='ybzc'||seleteType=='fazc'" input-align='left' label-width="4.5em" v-model="businessId" label="商机编号:" placeholder=""/>
            <van-field v-if="seleteType=='ybzc'||seleteType=='fazc'" input-align='left' label-width="4.5em" v-model="projectName" label="项目名称:" placeholder=""/>
            <!-- 中台能力查询 -->
            <van-field v-if="seleteType=='ztnl'" input-align='left' label-width="5.5em" v-model="abilityCode" label="能力提供方:" placeholder=""/>
            <van-field v-if="seleteType=='ztnl'" input-align='left' label-width="4.5em" v-model="abilityName" label="能力名称:" placeholder=""/>
            <van-field v-if="seleteType=='ztnl'" input-align='left' label-width="4.5em" v-model="abilityProvider" label="能力编码:" placeholder=""/>
            <!-- 大数据产品查询 -->
            <van-field v-if="seleteType=='dsjcp'" input-align='left' label-width="4.5em" v-model="productClass" label="产品分类:" placeholder=""/>
            <van-field v-if="seleteType=='dsjcp'" input-align='left' label-width="4.5em" v-model="maProductName" label="产品名称:" placeholder=""/>
            <!-- 三化数据列表查询 -->
            <van-field v-if="seleteType=='shjjfa'" input-align='left' label-width="4.5em" v-model="productClass" label="三化名称:" placeholder=""/>
            <van-field v-if="seleteType=='shjjfa'" input-align='left' label-width="4.5em" v-model="maProductName" label="三化编码:" placeholder=""/>
            <div style="display: flex;margin:20px 0 0 0">
              <div style="width:50% ;text-align: center;">
                 <van-button style=" display: inline-block;margin:0 20px 0 20px;padding:0 36px 0 36px" @click="chongzhibutton" type="default" >
                 重置</van-button>
              </div>
              <div style="width:50%;text-align: center;">
                 <van-button style=" display: inline-block;margin:0 20px 0 20px;padding:0 36px 0 36px" @click="cancelbutton" type="primary" color="#60a9ec" >
                 查询</van-button>
              </div>
            </div>
        </van-popup>
    </div>
    
  </div>
</template>

<script type="text/javascript">
import sjlistview from '@/components/sjlistview'
import ztnllist from '@/components/ZtnlListView'
import dsjcplist from '@/components/DsjcpListView'
import xcsjlistview from '@/components/xcsjlistview'
import shjjfalistview from '../../components/shjjfalistview'
import shglhtlistview from '../../components/shglhtlistview'
import {mapGetters} from 'vuex'
  export default {
    
    data(){
      return{
        tabviewName: '',
        showtodoDialog:false,
        businessId:'',
        projectName:'',
        pagename:'选择',
        seleteType:'',
        abilityCode:'',
        abilityName:'',
        abilityProvider:'',
        productClass:'',
        maProductName:'',
        projectEstablishNumber:'',
        solutionPlanInfoList:[]
      }
    },
    computed:{
      ...mapGetters(['user']),
    },
    //生命周期--创建完成
    activated() {
      this.seleteType=this.$route.query.seleteType
      if(this.seleteType=='ybzc'){
        this.pagename = '选择商机'
        this.tabviewName = sjlistview
      }else if(this.seleteType=='ztnl'){
        this.pagename = '选择中台能力'
        this.tabviewName = ztnllist
      }else if(this.seleteType=='dsjcp'){
        this.pagename = '选择大数据产品'
        this.tabviewName = dsjcplist
      }else if(this.seleteType=='fazc'){
        this.pagename = '选择商机'
        this.tabviewName = xcsjlistview
      }else if(this.seleteType=='shjjfa'){
        this.pagename = '选择三化解决方案'
        this.tabviewName = shjjfalistview
        this.solutionPlanInfoList = this.$route.query.solutionPlanInfoList
      }else if(this.seleteType=='shglht'){
        this.pagename = '选择三化关联合同'
        this.tabviewName = shglhtlistview
        this.projectEstablishNumber = this.$route.query.projectEstablishNumber
      }
    },
    components:{
      sjlistview,
      ztnllist,
      dsjcplist,
      xcsjlistview,
      shjjfalistview,
      shglhtlistview
    },
    //生命周期--挂载完成
    mounted() {
        
    },
    //方法调用
    methods: {
        searchDialog(){
          this.showtodoDialog=true;
        },
        chongzhibutton(){
          this.showtodoDialog=false;
          if(this.seleteType=='ybzc'||this.seleteType=='fazc'){
            this.businessId='';
            this.projectName='';
            this.$refs.searchdata.setsearchdata('','')
          }else if(this.seleteType=='ztnl'){
            this.abilityCode='';
            this.abilityName='';
            this.abilityProvider='';
            this.$refs.searchdata.setsearchdata('','','')
          }else if(this.seleteType=='dsjcp'){
            this.productClass='';
            this.maProductName='';
            this.$refs.searchdata.setsearchdata('','','')
          }else if(this.seleteType=='shjjfa'){
            this.productClass='';
            this.maProductName='';
            this.$refs.searchdata.setsearchdata('','','')
          }
        },
        cancelbutton(){
          this.showtodoDialog=false;
          if(this.seleteType=='ybzc'||this.seleteType=='fazc'){
            this.$refs.searchdata.setsearchdata(this.businessId,this.projectName)
          }else if(this.seleteType=='ztnl'){
            this.$refs.searchdata.setsearchdata(this.abilityCode,this.abilityName,this.abilityProvider)
          }else if(this.seleteType=='dsjcp'){
            this.$refs.searchdata.setsearchdata(this.productClass,this.maProductName)
          }else if(this.seleteType=='shjjfa'){
            this.$refs.searchdata.setsearchdata(this.productClass,this.maProductName)
          }
        },
    },
  }
</script>
<style  scoped>
/* @import url();*/
.item{
      text-align: center;
      width:20%
  }
  .pageview{
      height:100%;
      margin-bottom: 60px;
      font-size: 12px;
  }
  .tabview{
      position: fixed;
      bottom: 0;
      width: 100%;
      line-height: var(--footer-height);
      background-color: gray;
      padding-top: 20px;
      padding-bottom: 20px;
  }
  .vh100{
    width: 100%;
  }
  .pf-20{
    padding-right: 20px;
  }
</style>